<template>
	<view>
		<view class="p10" style="">
			<u-tabs :list="list"  :current="current" @change="change" :bold='false'></u-tabs>
			<u-search v-if="this,current==0" placeholder="日照香炉生紫烟" v-model="keyword" style='width: 360px;height: 50px;'>
			</u-search>
		</view>
		<view class="blind_content plr-30">
			<view class="blind_item mt-30" v-for="item in blind_list">
				<view class="blind_item_img" @click="blind_detail(item)">
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class="item_detail plr-20">
					<view class="detail_tit size-30 mt-10">
						{{item.name}}
					</view>
				</view>
				<view class="pricebox plr-20">
					￥{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					status:0
				}, {
					name: '持有中',
					status:1
				}, 
				{
					name: '挂售中',
					status:2
				},
				{
					name: '交易中',
					status:3
				},{
					name: '已出售',
					status:4
				},{
					name: '以转增',
					status:5
				},{
					name: '已合成',
					status:6
				},
				],
				current: 0,
				keyword: '',
				blind_list: [],
			}
		},
		onShow() {
			this.$http('api/orders/usersGoodsListGroup', {
				time_order: '',
				price_order: '',
				page: 1,
				pagesize: 10,
				search: "",
			}).then(res => {
				console.log(res.data);
				this.blind_list = res.data
			})
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(this.current);
			}
		}
	}
</script>
<style lang="less" scoped>
	.blind_content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.blind_item {
			width: 48%;
			height: 460rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;

			.pricebox {
				position: absolute;
				bottom: 20rpx;
				right: 0;
				font-weight: 600;
			}

			.blind_item_img {
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.circulation {
					width: 90%;
					position: absolute;
					bottom: 5rpx;
					left: 5%;
					z-index: 999;
				}

				.item_circulation {
					position: absolute;
					bottom: 10rpx;
					z-index: 10000;
					left: 28%;
				}
			}

			.item_detail {
				background: url(../../static/blindbox/ru1.png) no-repeat center 0rpx;
				background-position: center 0px;
				background-size: cover;

				.detail_tit {
					font-weight: 600;
				}

				.limit {
					width: 51%;
					background-color: rgb(254, 204, 173);
					justify-content: space-between;
					border-radius: 20rpx;

					.limitnum {
						background-color: rgb(253, 243, 234);
					}
				}
			}
		}
	}
</style>
